<template>
  <div id="add-blog">
    <h1>添加博客</h1>
    <form v-if="!submitted">
        <label>博客标题</label>
        <input type="text" v-model="blog.title" required/>

        <label>博客内容</label>
        <textarea v-model="blog.content"></textarea>

        <div id="checkboxes">
            <label for="Vue.js">Vue.js</label>
            <input type="checkbox" value="Vue.js" v-model="blog.categories" />
            <label for="Node.js">Node.js</label>
            <input type="checkbox" value="Node.js" v-model="blog.categories" />
            <label for="React.js">React.js</label>
            <input type="checkbox" value="React.js" v-model="blog.categories" />
            <label for="Angular4">Angular4</label>
            <input type="checkbox" value="Angular4" v-model="blog.categories" />
        </div>

        <label>作者:</label>
        <select v-model="blog.author">
            <option  v-for="(author,index) in authors" :key="index">
                {{author}}
            </option>
        </select>

        <button @click.prevent="post"> 添加博客</button>



    </form>


  <div v-if="submitted">
      <h3>您的博客发送成功</h3>
  </div>

    <div id="preview">
        <h3>博客总览</h3>
        <p>博客标题:{{blog.title}}</p>
        <p>博客内容:</p>
        <p>{{blog.content}}</p>
        <p>标题分类:</p>
        <ul>
            <li v-for="(category,index) in blog.categories" :key="index">
                {{category}}
            </li>
        </ul>
        <p>作者:{{blog.author}}</p>
    </div>


  </div>
</template>

<script>
export default {
  name: 'add-blog',
//   props: {
//     msg: String
//   }
// http://jsonplaceholder.typicode.com/posts
  data(){
      return{
          blog: {
              title: "",
              content: "",
              categories: [],
              author:"",
          },
          authors: ["bob", "tom", "sam"],
          submitted: false,

      }
  },
  methods: {
    post: function(){
        this.$http.post("http://jsonplaceholder.typicode.com/posts",
        
        {
            title: this.blog.title,
            body: this.blog.content,
            userId: 1
        }).then(function(data){
            console.log(data);
            this.submitted = true;
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

#add-blog *{
    box-sizing: border-box;
}

#add-blog{
    margin:20px auto;
    max-width: 600px;
    padding: 20px;
}
label{
    display: block;
    margin: 20px 0 10px;
}

input[type="text"],textarea, select{
    display: block;
    width: 100%;
    padding: 8px;
}

#checkboxes label{
    display: inline-block;
    margin-top: 0;
}

#checkboxes input{
    display: inline-block;
    margin-right: 30px;
}

textarea{
    height: 200px;
}

button{
    display: block;
    margin: 20px 0;
    background: crimson;
    color: #fff;
    border: 0;
    padding: 14px;
    border-radius: 4px;
    font-size: 18px;
    cursor: pointer;


}

#previe{
    padding: 10px 20px;
    border: 1px dotted #ccc;
    margin: 30px 0;
}
h3{
    margin-top: 10px;
}
</style>
